<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="author" content="Yb">
    <title>下拉列表</title>
    <style>
        html,body{
            height: 100%;
        }
        body{
            margin: 0;
            font-family: 'Microsoft YaHei';
        }
        ul,li{
            margin: 0;
            padding: 0;
            list-style-type: none;
        }
        #nav-bar{
            width: 910px;
            height: 36px;
            margin: 30px auto;
        }

        .navMain{
            display: flex;
            justify-content: space-around;
        }
        .navMain li{
            line-height: 36px;
            width: 100%;
            text-align: center;
            color: #fff;
            font-size: 14px;
            background-image: url(img/bg.png);
            background-position-y: -108px;
            background-repeat: no-repeat;
            cursor: pointer;
        }
        .navMain li:first-of-type{
            background-position-y: -36px;
        }
        .navMain div{
            width: 400px;
            height: 36px;
            background-position-x: -60px;
            background-position-y: -72px;
            background-image: url(img/bg.png);
            background-repeat: repeat;
        }
        .list{
            position: absolute;
            top: 64px;
        }
        .list div{
            float: left;
            margin: 5px 0;
            width: 10px;
            height: 27px;
            background-image: url(img/bg.png);
            background-position-y: -180px;
            display: none;
        }
        .list div:last-of-type{
            background-position: 10px -234px;
        }

        .listMenu{
            float: left;
            height: 27px;
            margin-top: 5px;
            background-image: url(img/bg.png);
            background-position-y: -207px;
        }
        .listMenu li{
            float: left;
            width: 70px;
            height: 16px;
            font-size: 12px;
            text-align: center;
            margin: 4px 0;
            color: #225d98;
            border-right: 1px solid #225d98;
            cursor: pointer;
        }
        .listMenu li:hover{
            border-bottom: 2px solid #225d98;
        }
        .listMenu li:last-child{
            border-right: none;
        }
        #checked div{
            display: block;
        }
    </style>
</head>
<body>
    <nav id="nav-bar">
        <ul class="navMain">
            <li>站长之家</li>
            <li>行业资讯</li>
            <li>站长在线</li>
            <li>网站运营</li>
            <li>设计在线</li>
            <li>网络编程</li>
            <li>联盟资讯</li>
            <li>服务器</li>
            <div></div>
        </ul>
        <div class="list">
            <div></div>
            <ul class="listMenu">
            
            </ul>
            <div></div>
        </div>
    </nav>
</body>
</html>

<script>
    window.onload = function(){
        var navMain = document.querySelector('.navMain');
        var aLi = document.querySelectorAll('.navMain li');
        var listMenu = document.querySelector('.listMenu');
        var list = document.querySelector('.list');

        var msg = [
            "业界动态|收购融资|门户动态|搜索引擎|网络游戏|电子商务|广告传媒|厂商开发",
            "站长报道|好站推荐|站长聚会|站长访谈|站长茶馆|网站排行",
            "建站经验|策划盈利|搜索优化|网站推广|免费推广",
            "酷站推荐|网页设计|WEB标准|视频处理|设计活动",
            "Asp编程|Php编程|.Net编程|Xml编程|Access|Mssql|Mysql",
            "联盟动态|联盟介绍|联盟点评|网赚技巧",
            "Web服务器|Ftp服务器|Mail服务器|Dns服务器|Win服务器|Linux服务器|安全防护|虚拟主机"
        ];
        // 测试
        // split() 按照指定的字符分割字符串，返回一个数组
        // console.log(msg[0].split('|').length);
        // console.log(msg[0].split('|')[0]);
        // console.log(msg[0].split('|')[1]);
        // console.log(msg[0].split('|')[2]);
        
        // 遍历导航栏
        for(var i = 1; i < aLi.length; i ++){
            aLi[i].index = i;

            // 添加悬浮事件
            aLi[i].onmouseover = function(){
                list.id = 'checked';
                // console.log(this.index);

                // 遍历更换css样式
                for(var i = 1; i < aLi.length; i ++){
                    aLi[i].style.backgroundPositionY = '-108px';
                }
                aLi[this.index].style.backgroundPositionY = '-144px';

                // 移除次级列表中所有的li
                listMenu.innerHTML = '';

                // 获取相对应 msg 数组中每个 分割后字符串
                var lmLi = msg[this.index-1].split('|');
                // console.log(lmLi);
                
                list.style.left = navMain.offsetLeft + this.offsetWidth * this.index / 1.4 + 'px';
                // 次级导航栏 添加 对应数量的li标签
                for(var i = 0; i < lmLi.length; i ++){
                    var newLi = document.createElement('li'); 
                    listMenu.appendChild(newLi);

                }
                
                // 获取添加后 次级导航栏 li
                var menuLi = document.querySelectorAll('.listMenu li');
                // 给每一个 次级导航的li标签中添加 对应的内容
                for(var i = 0; i < lmLi.length; i ++){
                    menuLi[i].innerHTML = lmLi[i];
                }
            }
        }
    }
</script>